<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>生鲜商城</title>
    <!-- 引入样式 -->
    <link
            rel="stylesheet"
            href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="js/jquery.js"></script>
    <script type="text/javascript"
            src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=PoF7YTodSZ5u0x6dO4st1daP5nqPGoMn">
    </script>
    <style type="text/css">
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }

        #container {
            height: 100%
        }
    </style>
</head>
<body>
<el-container id="app">
    <el-header style="height:510px">
        <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
        >
            <div class="demo-image">
                <div class="block" :key="img.headbg">
                    <el-image
                            style="width: 1920px; height: 440px"
                            :src="img.headbg"
                            :fit="img.headbg">
                    </el-image>
                </div>
            </div>
            <el-menu-item index="11">首页</el-menu-item>
            <el-menu-item index="22">商品</el-menu-item>
            <el-menu-item index="33">限时秒杀</el-menu-item>
            <el-menu-item index="44">领券中心</el-menu-item>
            <el-menu-item index="55">
                <a href="/loginAndRegister" target="_blank" v-if="user.userName=='' "  style="text-decoration: none">登录/注册</a>
                <a href="/myCenter" v-if="user.userName != '' " v-text="user.userName" style="color: #ED2553;text-decoration: none">{{user.userName}}</a>
                <a href="/shoppingCart" v-if="user.userName != '' " class="el-icon-shopping-cart-1"  style="color: #ED2553;text-decoration: none"></a>
            </el-menu-item>
            <el-menu-item index="66">
                <a href="javascript" target="_blank" v-if="user.userName==''"></a>
                <a href="/logout" v-else v-text="logout" style="text-decoration: none">{{logout}}</a>
            </el-menu-item>
        </el-menu>
        <div class="line"></div>
    </el-header>
    <el-main>

        <div class="earth" id="earth" style="height: 500px;width: 1920px"></div>
    </el-main>
</el-container>
<script>

    var app = new Vue({
        el: "#app",
        data: {
            activeIndex: "",
            productType: [],
            img: {
                headbg: '/img/bg/banner3.jpg',
                fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
            },
            user: {
                userName: '',
            },
            logout: '退出登录',
            location: {
                longitude: '106.53285',
                latitude: '29.590391',
            }
        },
        methods: {
            toProduct: function () {
                window.location.href = "/toProduct"
            },
            handleSelect: function (key, keyPath) {
                if(key==11){
                    window.location.href="/"
                }else if(key==22){
                    window.location.href="/toProduct"
                }else if(key==33){
                    window.open("/KillProduct")
                }else if(key==44){
                    window.location.href="/couponCenter"
                }
            },
            showPosition: function () {
                let longi = this.location.longitude;
                let lati = this.location.latitude;
                //指定百度地图渲染的位置<div class="earth" id="earth"></div>这里使用的div
                let map = new BMapGL.Map("earth");
                let currentLocation = new BMapGL.Point(longi, lati);
                map.setMapType(BMAP_NORMAL_MAP);
                map.centerAndZoom(currentLocation, 19);
                map.enableScrollWheelZoom(true);
                //在指定经纬度坐标画自定义覆盖层
                // map.addEventListener("click", addPoint);
                let marker = new BMapGL.Marker(currentLocation);
                map.addOverlay(marker);

                function addPoint(p) {
                    map.clearOverlays();
                    let x = p.latlng.lng;
                    let y = p.latlng.lat;
                    map.setMapType(BMAP_NORMAL_MAP);
                    let newPoint = new BMapGL.Point(x, y);
                    map.centerAndZoom(newPoint, 19);
                    let marker = new BMapGL.Marker(newPoint);
                    map.addOverlay(marker);
                }
            },
        },
        mounted: function () {
            var vm = this;
            $.ajax({
                url: "/freshmarket/product-type/getList",
                type: "post",
                dataType: "json",
                success: function (data) {
                    if (data.success == true) {
                        vm.productType = data.data;
                    } else {
                        console.log(data.message);
                    }
                },
            });
            //登录注册
            $.ajax({
                url: "/freshmarket/user/islogin",
                type: "get",
                success: function (data) {
                    console.log(data);
                    vm.user = data.data;
                }
            });
            var address = localStorage.getItem("address")
            $.ajax({
                url: "/freshmarket/storefront/selectAddress",
                data: "address=" + address,
                async: false,
                dataType: "json",
                type: "post",
                success: function (data) {
                    if (data.success) {
                        var gps = data.data.storefrontAddress.split(",")
                        vm.location.longitude = gps[0];
                        vm.location.latitude = gps[1];
                        vm.showPosition();
                    }
                }
            })
        },
    });
</script>
</body>
</html>
